<template>
  <view class="content-register">
    <view class="login-content">
      <view class="login-phone">
        <u-input :placeholder="$t('login.shuRuSjHm')" type="number" border="none" v-model="user.phone" customStyle="height:50px;padding: 0 15px">
          <u-image :src="`${imgPath}/images/icon/login_phone.png`" width="15px" height="18px" slot="prefix" />
        </u-input>
      </view>
      <view class="login-phone" v-if="isPassword">
        <u-input :placeholder="$t('login.shuRuMm')" border="none" type="password" v-model="user.password" customStyle="height:50px;padding: 0 15px">
          <u-image :src="`${imgPath}/images/icon/login_code.png`" width="15px" height="18px" slot="prefix" />
        </u-input>
      </view>
      <view class="login-phone" v-if="!isPassword">
        <u-input :placeholder="$t('login.shuRuYzM')" border="none" type="number" v-model="user.code" customStyle="height:50px;padding: 0 15px">
          <u-image :src="`${imgPath}/images/icon/login_code.png`" width="15px" height="18px" slot="prefix" />
          <u-text slot="suffix" :text="tips" color="#75CECC" @click="getCode" />
        </u-input>
      </view>
    </view>
    <u-code :seconds="60" uniqueKey="register" ref="uCode" @change="codeChange" :startText="$t('login.huoQuYzM')" :endText="$t('login.huoQuYzM')" />
  </view>
</template>

<script>
export default {
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      user: {
        phone: "",
        code: "",
        password: "",
      },
      tips: "",
      isPassword: true,
    };
  },
  onLoad() {},
  methods: {
    // 自动执行
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (!uni.$u.test.mobile(this.user.phone)) {
          uni.showToast({
            icon: "none",
            title: this.$t("login.tianXieZqSjH"),
            duration: 1500,
          });
          return false;
        }
        const res = await this.$api.generateSmsCode({ phone: this.user.phone });
        if (res.code === 0) {
          this.$refs.uCode.start();
        }
      } else {
        uni.$u.toast(this.$t("login.daoJiSjS"));
      }
    },
    nextStep() {
      uni.$u.route("/pages/register/register_second");
    },
  },
};
</script>

<style lang="scss" scoped>
.content-register {
  width: 100%;
  overflow: hidden;
}
.login-content {
  overflow: hidden;
  margin-top: 30px;
  padding: 0 30px;
  .login-phone {
    margin-top: 20px;
    background-color: #f6f9fe;
    height: 48px;
    border-radius: 8px;
    /deep/.u-input__content {
      height: 48px;
      padding: 0 10px;
    }
    /deep/.u-input__content__prefix-icon {
      margin-right: 15px;
    }
  }
}
</style>
